<template>
  <div>
    <Button type="primary" @click="modalForm = true">添加数据</Button>
    <Button type="primary" @click="removes">删除多个</Button>

    <Table border :columns="columns" :data="data" @on-selection-change="onSelect"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

    <Modal v-model="modalForm" title="数据操作">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="年龄" prop="age">
          <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
        </FormItem>

            <FormItem label="性别" prop="sex">
          <Input v-model="formValidate.sex" placeholder="请输入性别"></Input>
        </FormItem>
        <FormItem label="电话" prop="Tel">
          <Input v-model="formValidate.Tel" placeholder="请输入手机号"></Input>
        </FormItem>    <FormItem label="QQ" prop="QQ">
          <Input v-model="formValidate.QQ" placeholder="请输入QQ"></Input>
        </FormItem>
        <FormItem label="证件号" prop="Idcard">
          <Input v-model="formValidate.Idcard" placeholder="请输入证件号"></Input>
        </FormItem>
        <FormItem label="email" prop="email">
          <Input v-model="formValidate.email" placeholder="请输入email"></Input>
        </FormItem>
         <FormItem label="地址" prop="address">
          <Input v-model="formValidate.address" placeholder="请输入地址"></Input>
        </FormItem>
        <FormItem label="hobby" prop="hobby">
          <Input v-model="formValidate.hobby" placeholder="请输入爱好"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
      <div slot="footer">
        我就不显示按钮
      </div>
    </Modal>
  </div>

</template>
<script>
import Base from '../../base/Base';
export default {
  mixins: [Base],
  data() {
    return {
      formValidate: {
        name    : '',
        password: ''
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message : '必须输入姓名',
            trigger : 'blur'
          }
        ],
        age: [
          {
            required: true,
            message : '请输入年龄',
            trigger : 'blur'
          }
        ],
           sex: [
          {
            required: true,
            message : '必须输入性别',
            trigger : 'blur'
          }
        ],
        Tel: [
          {
            required: true,
            message : '请输入电话',
            trigger : 'blur'
          }
        ],
         QQ: [
          {
            required: true,
            message : '必须输入QQ',
            trigger : 'blur'
          }
        ],
        IDcard: [
          {
            required: true,
            message : '请输入证件号',
            trigger : 'blur'
          }
        ],
           email: [
          {
            required: true,
            message : '必须输入邮箱',
            trigger : 'blur'
          }
        ],
        address: [
          {
            required: true,
            message : '请输入地址',
            trigger : 'blur'
          }
        ]
      },
      columns: [
        {
          type : 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key  : 'name'
        },
        {
          title: '年龄',
          key  : 'age'
        },
        {
          title: '性别',
          key  : 'sex'
        },
        {
          title: '电话',
          key  : 'Tel'
        },{
          title: '证件号',
          key  : 'Idcard'
        },
        {
          title: 'email',
          key  : 'email'
        },{
          title: 'address',
          key  : 'address'
        },
        {
          title: 'hobby',
          key  : 'hobby'
        },
        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删除'
              )
            ]);
          }
        }
      ]
    };
  }
};
</script>
